<template>
  <el-dialog
    v-model="centerDialogVisible"
    width="30%"
    align-center
    color="white"
    style="     background-color: #053a6d6e;
    border: 5px solid #a1bf39;;"
  >
    <header class="el-dialog__header">
      <span role="heading" class="el-dialog__title" style="color: white">{{
        books.bookName
      }}</span>
    </header>
    <div
      id="el-id-4400-144"
      class="el-dialog__body"
      style="justify-content: space-evenly"
    >
      <div class="cover">
        <img :src="books.bookCover" alt="封面" />
      </div>
      <span
        ><el-button type="" style="background-color: rgb(57 175 191 / 48%);;" @click="add()">
          <span style="color:white;">+</span>
        </el-button></span
      >

      <p class="context">购买数量：{{ quantity }}</p>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="centerDialogVisible = false" style="background-color:rgb(57 175 191 / 48%);color: white;">取消</el-button>
        <el-button
          type=" "
          class="buy"
          @click="returnalipay()"
          v-if="total != 0"
        >
          你需支付{{ total }}
        </el-button>
      </span>
    </template>
  </el-dialog>
  <order @buy="buy" v-show="false"></order>
  <alipay ref="alipay" v-show="false"></alipay>
</template>
  <script>
import Order from "../qiantai/Order.vue";
import Alipay from "../qiantai/Alipay.vue";
export default {
  name: "BuyDialog",
  components: { Order, Alipay },
  data() {
    return {
      centerDialogVisible: false,
      books: [],
      quantity: 0,
      total: 0,
      item: [],
      userId: 0,
      alipayBean: {
        subject: "books.bookName",
        total_amount: "total",
        body: "",
      },
      oldfallback: "",
      parameterMap: "",
    };
  },
  created: function () {
    this.userName = sessionStorage.getItem("userName");
    console.log(this.userName);
    this.userId = sessionStorage.getItem("userId");
    console.log(this.userId);
  },

  methods: {
    // loadbooks() {
    //   this.$axios.get("/getbooks").then((resp) => {
    //     this.books = resp.data;
    //     console.log(resp.data);
    //     console.log(this.books);

    //   });F
    // },
    add() {
      console.log(this.item.quantity);
      if (this.item.quantity - this.quantity > 0) {
        this.quantity = this.quantity + 1;
        this.total = this.quantity * this.books.inPrice*this.books.discount;
      } else {
        this.$message({
          message: "没有那么多库存哦！",
          type: "error",
        });
      }
    },
    fallback() {
      console.log("执行fallback方法");

      this.buy();
      // this.$cookies.set('fallback',"")
      // this.$refs.buydialog.buy()
    },
    fallbackstart() {
      //   console.log(this.$cookies.get('fallback'));
      //   if (this.$cookies.get('fallback') == 'succees') {

      //      this.fallback()

      // }

      this.$axios.get("/fallbacktofront").then((resp) => {
        console.log(" resp.data:" + JSON.stringify(resp.data));
        this.parameterMap = JSON.stringify(resp.data);
        if (this.oldfallback == "") {
          if (this.parameterMap != "{}") {
            this.oldfallback = this.parameterMap;
            console.log("this.oldfallback:" + this.oldfallback);
            this.fallback();
            console.log("第一次买");
          }
        } else if (this.oldfallback != "") {
          if (
            this.oldfallback != this.parameterMap &&
            this.parameterMap != "{}"
          ) {
            this.oldfallback = this.parameterMap;
            this.fallback();
            console.log("不止第一次买");
          }
        }
      });
    },
    buyChangeQuantity() {
      console.log(sessionStorage.getItem("buyquantity"));

      var data = new FormData();
      data.append("buyquantity", sessionStorage.getItem("buyquantity"));
      data.append("item", JSON.parse(sessionStorage.getItem("book")).bookId);
      this.$axios.post("/buyChangeQuantity", data).then((resp) => {
        // this.loadbooks();
        this.$emit("books", this.books);

        (this.quantity = 0),
          (this.total = 0),
          (this.centerDialogVisible = false);
      });
    },
    buy() {
      console.log("执行buy方法");

      console.log(sessionStorage.getItem("book"));
      this.books = JSON.parse(sessionStorage.getItem("book"));
      this.$axios.post("/buyfirst", this.books).then((resp) => {
        var data = new FormData();
        console.log(
          "typeof:" + typeof parseInt(sessionStorage.getItem("buyquantity"))
        );
        data.append(
          "buyquantity",
          parseInt(sessionStorage.getItem("buyquantity"))
        );
        data.append(
          "total",
          parseFloat(sessionStorage.getItem("total_amount"))
        );
        data.append("userId", this.userId);
        this.$axios.post("/buy", data).then((resp) => {
          if (resp.data.code == 200) {
            this.buysucess();
            this.buyChangeQuantity();
            this.$axios.get("/fallbackclear");
          }
        });
      });

      //   this.$axios.post("http://localhost:8442/alipay", this.alipayBean).then(resp => {
      //   console.log(resp.data);
      // })

      // data.append('books', JSON.stringify(this.books))
    },
    returnalipay() {
      sessionStorage.setItem("subject", this.item.bookName);
      sessionStorage.setItem("total_amount", this.total);
      sessionStorage.setItem("body", this.item.info);
      sessionStorage.setItem("cover", this.item.bookCover);
      this.$router.replace("/alipay");
      sessionStorage.setItem("buyquantity", this.quantity);

      console.log("item");
      console.log("alipay.bookItem" + JSON.stringify(this.$refs.alipay.Item));
    },

    buysucess() {
      this.$message({
        message: "购买成功",
        type: "success",
      });
    },

    // listenerQuantityAndTotal() {
    //   if (this.centerDialogVisible == false) {
    //     this.quantity = 0
    //     this.total = 0
    //   }
    // }
  },

  mounted: function () {
    // this.loadbooks();
    // this.listenerQuantityAndTotal()
    this.fallbackstart();
  },
};
</script>
  <style scoped>
#el-id-4400-144 {
  display: flex;
  padding: 0;
  color: var(--el-text-color-regular);

  font-size: var(--el-dialog-content-font-size);
  /* background-color: #000000a2; */

  word-break: break-all;
}
.context {
  color: white;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
.el-button:hover {
  box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24),
    0 17px 50px 0 rgba(0, 0, 0, 0.19);
}
.buy:hover {
  box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24),
    0 17px 50px 0 rgba(0, 0, 0, 0.19);
  background-color:  #a1bf39;
}
.buy {
  box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24),
    0 17px 50px 0 rgba(0, 0, 0, 0.19);
  background-color: rgb(57 175 191 / 48%);
  color: white;
}
</style>